iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0

開發環境 & 套件

今天主要先把開發環境準備好,並建立專案。

喔對了! 才剛開始鐵人馬上被打臉,本次的採坑過程中主要是以 Laravel 5.8 為主,
但一早前輩捎來訊息,就在今天!! Laravel 推出 6.0 啦 (解釋解釋,甚麼叫驚喜 XD)! 看了 release notes,
還好仍支援 5.8,不然這臉也太腫了!

Laravel

  1. 下載、安裝 WampServer 整合包,方便開發
  2. 環境變數 "path" 加入要使用的 php 版本路徑,例如: {wamp_安裝的資料夾}\wamp\bin\php\php7.3.5
  3. 下載、安裝 Composer 做為日後 php 套件管理的工具
    • 安裝過程記得要選擇 "步驟 02" 路徑底下的 php.exe,其餘並不需要特別勾選選項,使用預設就可以
    • 重開機,開啟 cmd 執行下面指令,如果有出現版本號,就代表安裝成功啦!
    composer -V
    
  4. 開啟 cmd 執行下面指令,安裝全局的 Laravel 套件:
    composer global require laravel/installer
    
    • 輸入下面指令,確認安裝成功
    laravel -V
    
  5. 開啟 cmd 切換到專案要存放的路徑,並輸入下面指令建立新 Laravel 專案
    laravel new <專案名稱>
    
  6. 最後,我們要設定專案與 apache 之間的路徑對應,之後我們不用每次都要把專案存在特定地方,而且在本機還可以有自己的 domain (甚麼都 127.0.0.1 或是 localhost 多沒創意 XD)
    01. 開啟 {wamp 安裝路徑}\bin\apache\apache2.4.33\conf\extra\httpd-vhosts.conf,輸入下列資訊, 其中,DocumentRoot, ServerName, ServerAliasDirectory 需要設定
    <VirtualHost *:80>
        DocumentRoot {Laravel 專案路徑}\public
        ServerName {自訂 URI}
        ServerAlias {自訂 URI}
        <Directory  "{Laravel 專案路徑}\public">
            Options +Indexes +Includes +FollowSymLinks +MultiViews
            AllowOverride All
            Require local
        </Directory>
    </VirtualHost>
    
    1. 開啟 C:\Windows\System32\drivers\etc\hosts 輸入下列資訊,其中 {自訂的 URI} 要跟httpd-vhosts.conf 設定的一樣
    127.0.0.1 {自訂的 URI}
    
    1. 重啟 wamp

Nuxt.js

  1. 下載、安裝 Node.js
    • 輸入下面指令,確認 Node.js 與 npm (JavaScript 套件管理工具) 安裝成功
    node -v
    
    npm -v
    
  2. 輸入下面指令安裝 Nuxt.js
    npx create-nuxt-app <專案名稱>
    
    • 若安裝過程遇到: "Could not install from "..." as it does not contain a package.json file"
      01. 檢查 "C:\Users<USER_NAME>\AppData\Roaming\npm-cache"
      02. 若 <USER_NAME> 是包含空格,請將空格置換為 "~1"
      * First Name --> First~1Name
      03. 輸入下列指令,設定 cache
      npm config set cache "C:\Users\<USER_NAME>\AppData\Roaming\npm-cache"
      
      1. 重新輸入 Nuxt.js 安裝指令

開發環境設定好、也建立專案了,明天終於要開始 Laravel 了~

參考資料


上一篇
Day 01. 話說踩坑前...
下一篇
Day 03. Laravel 專案開箱
系列文
RRR撞到不負責之 Laravel + Nuxt.js 踩坑全紀錄31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言